<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <el-dialog
        :visible.sync="dialogVisibleShow"
        :append-to-body="true"
        top="8vh"
        width="60%"
        :close-on-click-modal="false"
        title="表字段信息">
      <el-table
          :data="showTableData"
          max-height="450">
        <el-table-column
            prop="Field"
            min-width="50"
            label="字段名称">
        </el-table-column>
        <el-table-column
            prop="Key"
            min-width="40"
            label="字段约束">
        </el-table-column>
        <el-table-column
            prop="Type"
            min-width="40"
            label="字段类型">
        </el-table-column>
        <el-table-column
            prop="Null"
            min-width="40"
            label="是否可以为空">
        </el-table-column>
        <el-table-column
            prop="Comment"
            min-width="80"
            label="注释">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-bind="$attrs"
               :visible.sync="dialogVisible"
               :append-to-body="true"
               top="8vh"
               width="60%"
               :close-on-click-modal="false"
               v-on="$listeners" @open="onOpen" @close="onClose" :title="dialogTitle">
      <div style="display: flex;border: #1E9FFF 1px solid;margin-bottom: 5px;padding: 3px">
        <div>选择的表：</div>
        <div style="font-size: large;">{{ this.createTableList.toString() }}</div>
      </div>
      <el-row :gutter="5">
        <el-form ref="elForm" :model="generatorConfig" :rules="rules" size="small" label-width="100px"
                 label-position="left">
          <el-col :span="12">
            <el-form-item label="作者名称" prop="authorName">
              <el-input v-model="generatorConfig.authorName" placeholder="请输入作者名称" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="swagger模式" prop="enableSwagger" required>
              <el-switch v-model="generatorConfig.enableSwagger"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="130px" label="entity包名" prop="entityName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.entityName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入entity包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="entityNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="130px" label="service包名" prop="serviceName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.serviceName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入service包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="serviceNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">

            <el-form-item label-width="130px" label="serviceImpl包名" prop="serviceImplName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.serviceImplName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入serviceImpl包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="serviceImplNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="130px" label="mapper包名" prop="mapperName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.mapperName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入mapper包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="mapperNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="130px" label="mapperxml包名" prop="xmlName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.xmlName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入mapperxml包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="xmlNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="130px" label="controller包名" prop="controllerName">
              <el-autocomplete
                  class="inline-input"
                  v-model="generatorConfig.controllerName"
                  :fetch-suggestions="packNamesSearch"
                  placeholder="请输入controller包名" show-word-limit
                  clearable :style="{width: '100%'}"
                  @select="controllerNameSelect"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生成代码" prop="tempList">
              <el-checkbox-group v-model="generatorConfig.tempList" size="medium">
                <el-checkbox v-for="(item, index) in tempListOptions" :key="index" :label="item.value"
                             :disabled="item.disabled">{{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="140px" label="Service文件名" prop="serviceFileName">
              <el-input v-model="generatorConfig.serviceFileName" placeholder="请输入Service文件名" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="140px" label="ServiceImpl文件名" prop="serviceImplFilename">
              <el-input v-model="generatorConfig.serviceImplFilename" placeholder="请输入ServiceImpl文件名"
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="开启Lombok" prop="enableLombok" required>
              <el-switch v-model="generatorConfig.enableLombok"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="过滤表前缀" prop="addTablePrefix">
              <el-input v-model="generatorConfig.addTablePrefix" placeholder="请输入过滤表前缀" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="大写命名" prop="enableCapitalMode" required>
              <el-switch v-model="generatorConfig.enableCapitalMode"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="120px" label="@Mapper注解" prop="enableMapperAnnotation" required>
              <el-switch v-model="generatorConfig.enableMapperAnnotation"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主键类型" prop="idType">
              <el-select v-model="generatorConfig.idType" placeholder="请选择主键类型" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in idTypeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">生成并下载代码</el-button>
      </div>
    </el-dialog>
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">代码生成</div>
      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">
        <el-button type="primary" icon="el-icon-plus" @click="batchAdd">
          批量生成
        </el-button>
        <div class="c-item">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="p.name"
              clearable>
          </el-input>
        </div>
      </div>
      <el-table
          :border="true"
          resizable
          ref="dataTable"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          max-height="450">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column
            prop="Name"
            min-width="50"
            label="表名">
        </el-table-column>
        <el-table-column
            prop="Comment"
            min-width="80"
            label="注释">
        </el-table-column>
        <el-table-column
            prop="Create_time"
            min-width="60"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="Rows"
            min-width="60"
            label="数据行数">
        </el-table-column>
        <el-table-column
            min-width="160"
            label="操作">
          <template slot-scope="scope">

            <el-button type="text" @click.native.prevent="create(scope.row.Name)">生成代码
            </el-button>

            <el-button type="text" @click.native.prevent="show(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
let PATH = "/generator"
module.exports = {
  components: {},
  watch: {
    'p.name': function (val) {
      this.f5()
    }
  },
  data() {
    return {
      createTableList: [],
      tableData: [],
      showTableData: [],
      p: {
        name: ''
      },
      dialogVisible: false,
      dialogVisibleShow: false,
      dialogTitle: '生成代码配置',
      packNames: [],
      generatorConfig: {},
      rules: {
        authorName: [{
          required: true,
          message: '请输入作者名称',
          trigger: 'blur'
        }],
        entityName: [{
          required: true,
          message: '请输入entity包名',
          trigger: 'blur'
        }],
        serviceName: [{
          required: true,
          message: '请输入service包名',
          trigger: 'blur'
        }],
        serviceImplName: [{
          required: true,
          message: '请输入serviceImpl包名',
          trigger: 'blur'
        }],
        mapperName: [{
          required: true,
          message: '请输入mapper包名',
          trigger: 'blur'
        }],
        xmlName: [{
          required: true,
          message: '请输入mapperxml包名',
          trigger: 'blur'
        }],
        controllerName: [{
          required: true,
          message: '请输入controller包名',
          trigger: 'blur'
        }],
        tempList: [{
          required: true,
          type: 'array',
          message: '请至少选择一个生成代码',
          trigger: 'change'
        }],
        serviceFileName: [{
          required: true,
          message: '请输入Service文件名',
          trigger: 'blur'
        }],
        serviceImplFilename: [{
          required: true,
          message: '请输入ServiceImpl文件名',
          trigger: 'blur'
        }],
        idType: [{
          required: true,
          message: '请选择主键类型',
          trigger: 'change'
        }],
      },
      tempListOptions: [{
        "label": "ENTITY",
        "value": "ENTITY"
      }, {
        "label": "SERVICE（一般没用不建议生成）",
        "value": "SERVICE"
      }, {
        "label": "SERVICE_IMPL",
        "value": "SERVICE_IMPL"
      }, {
        "label": "CONTROLLER",
        "value": "CONTROLLER"
      }, {
        "label": "MAPPER",
        "value": "MAPPER"
      }, {
        "label": "MAPPERXML",
        "value": "XML"
      }, {
        "label": "CRUD前端页面",
        "value": "VUE"
      }],
      idTypeOptions: [{
        "label": "AUTO",
        "value": "AUTO"
      }, {
        "label": "NONE",
        "value": "NONE"
      }, {
        "label": "INPUT",
        "value": "INPUT"
      }, {
        "label": "ASSIGN_ID",
        "value": "ASSIGN_ID"
      }, {
        "label": "ASSIGN_UUID",
        "value": "ASSIGN_UUID"
      }],
    }
  },
  methods: {
    defaultGenConfig() {
      return {
        authorName: "清欢",
        enableSwagger: false,
        entityName: "com.wlf.server.entity",
        serviceName: "com.wlf.server.service",
        serviceImplName: "com.wlf.server.service",
        mapperName: "com.wlf.server.mapper",
        xmlName: "com.wlf.server.mapper.xml",
        controllerName: "com.wlf.server.controller",
        tempList: ["ENTITY", "SERVICE_IMPL", "CONTROLLER", "MAPPER", "XML"],
        serviceFileName: "ServiceInterface",
        serviceImplFilename: "Service",
        enableLombok: true,
        addTablePrefix: "t_",
        enableCapitalMode: false,
        enableMapperAnnotation: true,
        idType: "ASSIGN_ID",
      }
    },
    batchAdd() {
      let selects = this.$refs['dataTable'].selection
      if (selects.length === 0) return sa.error('请至少勾选一张表')
      this.createTableList.push(selects.map(i => i.Name));
      this.dialogVisible = true;
    },
    entityNameSelect(item) {
      this.generatorConfig.entityName = item
    },
    serviceNameSelect(item) {
      this.generatorConfig.serviceName = item
    },
    serviceImplNameSelect(item) {
      this.generatorConfig.serviceImplName = item
    },
    mapperNameSelect(item) {
      this.generatorConfig.mapperName = item
    },
    xmlNameSelect(item) {
      this.generatorConfig.xmlName = item
    },
    controllerNameSelect(item) {
      this.generatorConfig.controllerName = item
    },
    packNamesSearch(queryString, cb) {
      let restaurants = this.packNames;
      let results = queryString ? restaurants.filter(this.packNamesFilter(queryString)) : restaurants;
      cb(results);
    },
    packNamesFilter(queryString) {
      return (restaurant) => {
        return (restaurant.indexOf(queryString) !== -1);
      };
    },

    create(name) {
      this.createTableList.push(name);
      this.dialogVisible = true;
    },
    show(row) {
      sa.ajax(PATH + '/show-table-field', {name: row.Name}, (res) => {
        this.showTableData = res.data
        this.dialogVisibleShow = true;
      }, {type: "get"})
    },
    onOpen() {
      sa.ajax(PATH + "/init-form", {}, (res) => {
        this.packNames = res.data.packNames;
        let generatorConfig = res.data.generatorConfig;
        if (generatorConfig) {
          this.generatorConfig = JSON.parse(generatorConfig)
        } else {
          this.generatorConfig = this.defaultGenConfig()
        }
      }, {type: 'get', msg: '加载表单预填数据'})
    },
    onClose() {
      this.createTableList = []
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.dialogVisible = false
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // 发送请求下载文件
        sa.downLoadFile(sa.cfg.api_url + PATH + "/generator", {
          config: JSON.stringify(this.generatorConfig),
          tables: JSON.stringify(this.createTableList)
        }, "POST")
      })
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
